<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>智慧社区可视化大屏</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入地图数据插件 -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
    <script src="../static/jquery-3.7.1.js"></script>
    <script src="../static/echarts-all.js"></script>
    <script src="../static/my.js"></script>
    <script>
        // 获取当前日期和时间，并更新页面内容
        function updateDateTime() {
            var now = new Date();
            var year = now.getFullYear();       // 年
            var month = now.getMonth() + 1;     // 月（JavaScript中月份是从0开始的）
            var day = now.getDate();            // 日
            var hours = now.getHours();         // 小时
            var minutes = now.getMinutes();     // 分钟
            var seconds = now.getSeconds();     // 秒
        
            // 格式化日期和时间
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
        
            var dateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        
            // 更新页面中的元素
            document.getElementById('dateTime').innerText = dateTime;
        }
        
        // 每秒更新一次日期和时间
        setInterval(updateDateTime, 1000);
        </script>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            background-color: #8bb0e7;
        }

        .header {
            width: 100%;
            background-color: #4866d4;
            color: white;
            text-align: center;
            padding: 10px 0;
            font-size: 24px;
        }

        .content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-grow: 1;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .chart-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 30%;
            height: 100%;
        }
        .kkkt{
            height: 67%;
            background: #8bb0e7;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .chart {
            width: 100%;
            height: 33%;
            background: #8bb0e7;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        #box {
            width: 40%;
            height: 100%;
            background: white;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="header">智慧社区可视化大屏
        <div id="dateTime"></div>
    </div>
    <div class="content">
        <div class="chart-container">
            <div id="pict" class="chart"></div>
            <div class="kkkt">
                <p>
                    <label for="number">身份证号:</label>
                    <input type="text" name="number" id="my_number" placeholder="请输入编号">
                    <input type="submit" value="查询" onclick="search_r()">
                </p>
                <table id="my_table">
                    <caption>出入管理</caption>
                    <thead>
                        <td>进入方式</td>
                        <td>姓名</td>
                        <td>角色</td>
                        <td>时间</td>
                    </thead>
                </table>
            </div>
        </div>
        <div id="box"></div>
        <div class="chart-container">
            <div id="picture" class="chart"></div>
            <div id="hart" class="chart"></div>
            <div id="line" class="chart"></div>
        </div>
    </div>

</body>

</html>